<script>
import api from "@/api.js";

export default {
  data() {
    return {
      borrowRecords: [],
    };
  },
  computed: {
    unreturnedRecords() {
      return this.borrowRecords.filter(record => !record.returnDate);
    },
  },
  methods: {
    goHome() {
      this.$router.push('/main');
    },
    async returnBook(record) {
      const response = await api.returnBook(record.id);
      const data = response.data;
      alert(data.msg);
      await this.findRecord();
    },
    async findRecord() {
      const response = await api.findRecord();
      const data = response.data;
      this.borrowRecords = data.data;
    },
  },
  mounted() {
    this.findRecord();
  },
}
</script>

<template>
  <div class="container">
    <img src="@/assets/logo.png" alt="Logo" class="logo" @click="goHome"/>
    <h1>归还书籍</h1>
    <div class="table-container">
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>图书 ID</th>
        <th>图书标题</th>
        <th>借阅时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="record in unreturnedRecords" :key="record.id">
        <td>{{ record.id }}</td>
        <td>{{ record.bookId }}</td>
        <td>{{ record.title }}</td>
        <td>{{ record.borrowDate }}</td>
        <td>
          <button @click="returnBook(record)">归还</button>
        </td>
      </tr>
      </tbody>
    </table>
    </div>
  </div>
</template>
<style scoped>
/* 页面容器样式 */
.container {

  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  height: 100vh; /* 高度占满视口 */
  width: 100%; /* 宽度占满 */
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}
.logo{
  width: 250px; /* 设置宽度 */
  height: auto; /* 保持比例 */
  margin-top: 10px;
  margin-left: 20px;
}

.logo:hover {
  transform: scale(1.1); /* 悬停时放大 */
}

/* 标题样式 */
h1 {
  margin-top: -20px;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  font-size: 24px;
}

/* 表格容器样式 */
.table-container {
  max-height: 400px; /* 设置最大高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
  border: 1px solid #ddd; /* 添加边框 */
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fafafa;
}

/* 表头样式 */
th, td {
  padding: 12px;
  text-align: center;
  border: 1px solid #ddd;
}

th {
  font-weight: bold;
  color: #555;
}

/* 按钮样式 */
button {
  background-color: #007bff;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background-color: #0056b3;
}

/* 行悬浮效果 */
tr:hover {
  background-color: #f4f4f4;
}
</style>
